<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            $("input:eq(0)").click(function(){
                console.log($("ul").children());//获取当前元素的子元素的集合
                $("ul").children().css("background","red");

            });
            $("input:eq(1)").click(function(){
                // console.log($("li").parent());//获取当前元素的父元素
                // $("li").parent().css("background","green");
                console.log($("li").parents());//获取祖先元素,html、body、ul

            });
            $("input:eq(2)").click(function(){

                //同级别紧邻在ul前面的元素
                console.log($("ul").prev());
                $("ul").prev().css("background","red");

            });
            $("input:eq(3)").click(function(){

                //同级别紧邻在ul后面的元素
                console.log($("ul").next());
                $("ul").next().css("background","blue");

            });
            $("input:eq(4)").click(function(){

                //同级别紧邻在ul前后的所有的同辈元素
                console.log($("ul").siblings());
                $("ul").siblings().css("background","pink");

                //使用工具函数each()来进行遍历
                $.each($("ul").siblings(),function(index,item){
                    // console.log(index);//索引
                    console.log(item);//DOM对象
                    console.log(this===item);
                });

            });
        });
    </script>
</head>
<body>
    <input type="button" value="遍历子元素">
    <input type="button" value="遍历前辈元素">
    <input type="button" value="遍历同辈紧邻其前的元素">
    <input type="button" value="遍历同辈紧邻其后的元素">
    <input type="button" value="遍历同辈紧邻其前后的元素">
    <div>div01</div>
    <div>div02</div>
    <div>div03</div>
    <p>ppp</p>
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <li>li05</li>
        <span>ul中的span</span>
    </ul>
    <li>lili</li>
    <p>p01</p>
    <p>p02</p>
    <p>p03</p>
    <p>p04</p>
</body>
</html>